<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5语义标签示例</title>
  <style>
    header, nav, main, article, section, aside, footer {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
    }
    header, footer { background-color: #f0f0f0; }
    nav ul { list-style: none; display: flex; gap: 20px; }
    article { max-width: 800px; }
    aside { float: right; width: 250px; }
    .clearfix::after { content: ""; display: table; clear: both; }
  </style>
</head>
<body>
  <header>
    <h1>我的技术博客</h1>
    <nav>
      <ul>
        <li><a href="/home">首页</a></li>
        <li><a href="/articles">文章</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>
  <div>
    <main>
      <article>
        <h2>HTML5语义化标签的优势</h2>
        <time datetime="2024-09-25">发布于2024年9月25日</time>
        <section>
          <h3>1. 提升代码可读性</h3>
          <p>语义标签（如header、article）比div更直观，开发者能快速理解页面结构。</p>
        </section>
        <section>
          <h3>2. 优化SEO</h3>
          <p>搜索引擎能通过语义标签识别页面核心内容（如main、article），提升排名。</p>
        </section>
        <figure>
          <img src="https://picsum.photos/id/2/600/300" alt="语义化标签结构示意图">
          <figcaption>图1：HTML5语义标签页面结构</figcaption>
        </figure>
      </article>
    </main>
    <aside>
      <h3>热门文章</h3>
      <ul>
        <li><a href="/css-flex">CSS Flex布局详解</a></li>
        <li><a href="/js-async">JavaScript异步编程</a></li>
      </ul>
      <h3>关于作者</h3>
      <p>前端开发者，专注于Web技术分享。</p>
    </aside>
  </div>
  <footer>
    <p>&copy; 2024 我的技术博客 | 联系方式：contact@example.com</p>
  </footer>
</body>
</html>